<template >
    <div class="miaoshaPage" >
        <el-card>
            <p>头像添加</p>
            <el-upload
                class="avatar-uploader"
                :action="this.MYURL+`/answerer/addHead`"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :on-remove="handleRemove"
                :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <span v-if="imageUrl" class="el-upload-action" @click.stop="handleRemove()">
                    <i class="el-icon-delete"></i>
                </span>
                <i v-else class="el-icon-upload2 avatar-uploader-icon" stop></i>
            </el-upload>
        </el-card>
<!-- -----------------  -->

          <anserCard v-for="(d) in date" :key="d.id" :cardData="d" >
              <!-- :miaoshaData="" -->
          
          </anserCard>
            
          <p >没有更多了</p>
    </div>
</template>
<script>
import {dt} from "@/testData/testData.js"
import anserCard from '@/components/tableDate/anserCard'
export default {
    name:"page3",
    components:{anserCard},
    data() {
        return {
            date:dt,
            miaoshaTable:this.getMiaoshaDate,
            imageUrl: ''
        }
    },
    methods: {
              // 滚动信息
        load () {
        this.count += 2
        console.log("滚动条count:",this.count)
      },
      
      getMiaoshaDate(){
        
        this.$axios.get(this.MYURL + "/miaosha/selectAll")
          // http://localhost:8001/miaosha/selectAll 
          .then(res => {
            // this.tableData=res
            console.log("提交表：", res)
            this.tableData = res
          }
          )
          .catch(function (error) { alert("请求失败" + error) })
      },


       // 移除图片
    handleRemove() {
      this.imageUrl = ''
    },
    // 上传成功回调
    handleAvatarSuccess(res, file) {
        console.log(file.type)
      this.imageUrl = res.data.url
    },
    // 上传前格式和图片大小限制
    beforeAvatarUpload(file) {
      const type = file.type === 'image/jpeg' || 'image/jpg' || 'image/webp' || 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!type) {
        this.$message.error('图片格式不正确!(只能包含jpg，png，webp，JPEG)')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
      }
      return type && isLt2M
    }
    },
    computed:{
      
    }
    
}


</script>
<style scoped>
    .miaoshaPage{
        height:  calc(100vh);
        background-color: rgba(195, 149, 243, 0.5);
    }
</style>